<template>
  <div class="data-activities">
    <section class="clear">
      <div class="common-census activities-box fl">
        <div class="c-title">
          <span>教研活动统计</span>
        </div>
        <div class="census bgc1">
          <ul class="clear">
            <li>
              <span class="app-sum">{{activitiesData.total_num}}</span>
              <span class="app-name">活动总数</span>
            </li>
            <li>
              <span class="app-sum">{{activitiesData.eva_num}}</span>
              <span class="app-name">网络教研</span>
            </li>
            <li>
              <span class="app-sum">{{activitiesData.group_num}}</span>
              <span class="app-name">学科圈组</span>
            </li>
            <li>
              <span class="app-sum">{{activitiesData.prepare_num}}</span>
              <span class="app-name">协同备课</span>
            </li>
            <li>
              <span class="app-sum">{{activitiesData.task_num}}</span>
              <span class="app-name">布置作业</span>
            </li>
          </ul>
        </div>
        <div class="c-title">
          <span>活动占比</span>
        </div>
        <div class="ratio circle bgc1">
          <div class="circle-l">
            <div class="container">
              <div class="data">
                <el-progress
                  type="circle"
                  color="#08DBFF"
                  :stroke-width="15"
                  :percentage="activitiesData.evaPercent"
                ></el-progress>
              </div>
              <div class="title">
                <p>网络教研</p>
              </div>
            </div>
          </div>
          <div class="circle-l">
            <div class="container">
              <div class="data">
                <el-progress
                  type="circle"
                  color="#08DBFF"
                  :stroke-width="15"
                  :percentage="activitiesData.groupPercent"
                ></el-progress>
              </div>
              <div class="title">
                <p>学科圈组</p>
              </div>
            </div>
          </div>
          <div class="circle-l">
            <div class="container">
              <div class="data">
                <el-progress
                  type="circle"
                  color="#08DBFF"
                  :stroke-width="15"
                  :percentage="activitiesData.preparePercent"
                ></el-progress>
              </div>
              <div class="title">
                <p>协同备课</p>
              </div>
            </div>
          </div>
          <div class="circle-l">
            <div class="container">
              <div class="data">
                <el-progress
                  type="circle"
                  color="#08DBFF"
                  :stroke-width="15"
                  :percentage="activitiesData.taskPercent"
                ></el-progress>
              </div>
              <div class="title">
                <p>布置作业</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="task-count fl">
        <div class="c-title">
          <span>教研活动发起数</span>
          <template>
            <el-select class="fr" v-model="sponsorDayVal" placeholder="选择时间">
              <el-option
                v-for="item in sponsorDays"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </div>
        <div class="task-map bgc1">
          <lineChart
            v-if="sponsorChartFlag==true"
            id="task-chart"
            style="width: 100%;height:100%;"
            :chartData.sync="sponsorData"
          ></lineChart>
          <div v-else class="no-data-tips">- 暂无数据 -</div>
        </div>
      </div>
    </section>

    <section class="clear">
      <div class="homework fl">
        <div class="c-title">
          <span>任务布置次数</span>
          <template>
            <el-select class="fr" v-model="decorateDayVal" placeholder="选择时间">
              <el-option
                v-for="item in decorateDays"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </div>
        <div class="homework-map bgc1">
          <lineChart
            v-if="decorateChartFlag==true"
            id="homework-chart"
            style="width: 100%;height:100%;"
            :chartData.sync="decorateData"
          ></lineChart>
          <div v-else class="no-data-tips">- 暂无数据 -</div>
        </div>
      </div>
      <div class="ranking fl">
        <div class="c-title">
          <span>布置作业教师排行</span>
        </div>
        <div class="teacher-ranking sampling bgc1">
          <template v-if="JSON.stringify(homeworkRankData)!='{}'">
            <ul>
              <template v-for="(item,index) of homeworkRankData.data">
                <li v-if="index<6" :key="index">
                  <p class="clear">
                    <span class="percent-name fl">{{item.user_name}}</span>
                    <span class="percentage fr">{{item.add_num}}次</span>
                  </p>
                  <el-progress :show-text="false" :stroke-width="24" :percentage="item.percent"></el-progress>
                </li>
              </template>
            </ul>
            <div
              v-if="homeworkRankData.data!=undefined&&homeworkRankData.data.length==0"
              class="no-data-tips"
            >- 暂无数据 -</div>
            <!-- <div class="tips">
              <p>数据取自 {{getDateDiff(homeworkRankData.update_time)}}</p>
            </div> -->
          </template>
        </div>
      </div>
      <div class="top-join fl">
        <div class="c-title">
          <span>参与TOP榜</span>
        </div>
        <div class="top-join-list top-list bgc1">
          <ul v-if="joinData!=undefined&&joinData.length>0">
            <template v-for="(item,index) of joinData">
              <li v-if="index<5" :key="index">
                <img :src="`${BASE_URL}${item.avatar_path}`" alt="头像" />
                <div class="info">
                  <p class="title1" :title="item.user_name">{{item.user_name}}</p>
                  <p class="title2">参与数：{{item.join_num}}</p>
                </div>
              </li>
            </template>
          </ul>
          <div v-else class="no-data-tips">- 暂无数据 -</div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import lineChart from "../Charts/lineChart";
import {
  getPassData,
  changeSimpleDate
} from "../../../assets/js/charts/chartsTool.js";
//折线图默认数据:
const defaultChartData = {
  yAxisName: "", //鼠标hover显示框中显示y轴的名称
  timeTitle: "", //日期区间标题
  dateData: [], //日期数组
  countData: [] //访问量数组
};
export default {
  components: {
    lineChart
  },
  props: ["platformId"], //上级页面传来的平台id
  data() {
    return {
      //教研活动统计/活动占比数据
      activitiesData: {
        evaPercent: 0, //网络教研百分比
        groupPercent: 0, //学科圈组百分比
        preparePercent: 0, //教案百分比
        taskPercent: 0, //布置作业百分比
        eva_num: 0,
        group_num: 0,
        task_num: 0,
        prepare_num: 0,
        total_num: 0 //活动总数
      },

      // 教研活动发起数：
      sponsorChartFlag: false, //默认不显示总量图表
      sponsorData: Object.assign({}, defaultChartData),
      sponsorDays: [
        {
          value: "2",
          label: "近3天"
        },
        {
          value: "6",
          label: "近7天"
        },
        {
          value: "29",
          label: "近30天"
        }
      ],
      sponsorDayVal: "29", //默认选中三十天

      // 任务布置次数：
      decorateChartFlag: false, //默认不显示总量图表
      decorateData: Object.assign({}, defaultChartData),
      decorateDays: [
        {
          value: "2",
          label: "近3天"
        },
        {
          value: "6",
          label: "近7天"
        },
        {
          value: "29",
          label: "近30天"
        }
      ],
      decorateDayVal: "29", //默认选中三十天
      homeworkRankData: {}, //教师布置作业的排行数据
      joinData: [] //参与top榜数据
    };
  },
  created() {},
  mounted() {},
  watch: {
    //上级页面传来的平台id值
    platformId: {
      handler(a, b) {
        if (a != "") {
          this.getActivities();
          this.getSponsorCount();
          this.getDecorateCount();
          this.getHomeworkRank();
          this.getJoinData();
        }
      },
      immediate: true
    },
    // 活动发起数  下拉框选查看不同的天数
    sponsorDayVal(a, b) {
      if (a != b) {
        this.getSponsorCount();
      }
    },
    //布置任务次数  下拉框选查看不同的天数
    decorateDayVal(a, b) {
      if (a != b) {
        this.getDecorateCount();
      }
    }
  },
  methods: {
    //获取活动统计数据
    getActivities() {
      let success = res => {
        if (!is_empty(res.data)) {
          if (res.data.total_num > 0) {
            this.activitiesData.evaPercent = Math.round(
              (res.data.eva_num / res.data.total_num) * 100
            );
            this.activitiesData.groupPercent = Math.round(
              (res.data.group_num / res.data.total_num) * 100
            );
            this.activitiesData.preparePercent = Math.round(
              (res.data.prepare_num / res.data.total_num) * 100
            );
            this.activitiesData.taskPercent = Math.round(
              (res.data.task_num / res.data.total_num) * 100
            );
          } else {
            this.activitiesData.evaPercent = 0;
            this.activitiesData.groupPercent = 0;
            this.activitiesData.preparePercent = 0;
            this.activitiesData.taskPercent = 0;
          }

          this.activitiesData.eva_num = res.data.eva_num;
          this.activitiesData.group_num = res.data.group_num;
          this.activitiesData.task_num = res.data.task_num;
          this.activitiesData.prepare_num = res.data.prepare_num;
          this.activitiesData.total_num = res.data.total_num;
        }
      };
      this.$ajax({
        url: "api/bigdata/research_countdata",
        method: "get",
        params: {
          platform_id: this.platformId
        },
        func: { success: success }
      });
    },
    //获取教研活动发起数数据
    getSponsorCount() {
      //先把原有的图表数据清理：
      this.sponsorChartFlag = false;
      this.sponsorData = Object.assign({}, deep_clone(defaultChartData));
      let success = res => {
        if (!is_empty(res.data)) {
          this.sponsorData.yAxisName = "发起数";
          this.sponsorData.timeTitle =
            getPassData(this.sponsorDayVal, "/") + "-" + getPassData(0, "/"); //最近7天日期字符串
          let dataArr = res.data.data;
          for (let inx in dataArr) {
            ////用于图表横坐标
            this.sponsorData.dateData.push(changeSimpleDate(dataArr[inx].key));
            //// 图表纵坐标
            this.sponsorData.countData.push(dataArr[inx].time_value);
          }
          this.sponsorChartFlag = true; //显示图表
        }
      };
      this.$ajax({
        url: "api/bigdata/research_createdata",
        method: "get",
        params: {
          start_time: getPassData(this.sponsorDayVal, "-"),
          end_time: getPassData(0, "-"),
          platform_id: this.platformId
        },
        func: { success: success }
      });
    },
    //获取任务布置数数据
    getDecorateCount() {
      //先把原有的图表数据清理：
      this.decorateChartFlag = false;
      this.decorateData = Object.assign({}, deep_clone(defaultChartData));
      let success = res => {
        if (!is_empty(res.data)) {
          this.decorateData.yAxisName = "次数";
          this.decorateData.timeTitle =
            getPassData(this.decorateDayVal, "/") + "-" + getPassData(0, "/"); //最近7天日期字符串
          let dataArr = res.data.data;
          for (let inx in dataArr) {
            this.decorateData.dateData.push(changeSimpleDate(dataArr[inx].key)); //图表横坐标
            this.decorateData.countData.push(dataArr[inx].time_value); //图表纵坐标
          }
          this.decorateChartFlag = true; //显示图表
        }
      };
      this.$ajax({
        url: "api/bigdata/research_taskdata",
        method: "get",
        params: {
          start_time: getPassData(this.decorateDayVal, "-"),
          end_time: getPassData(0, "-"),
          platform_id: this.platformId
        },
        func: { success: success }
      });
    },
    //获取布置作业教师排行的数据
    getHomeworkRank() {
      let success = res => {
        if (!is_empty(res.data)) {
          this.homeworkRankData = res.data;
        }
      };
      this.$ajax({
        url: "api/bigdata/research_teacherdata",
        method: "get",
        params: {
          platform_id: this.platformId
        },
        func: { success: success }
      });
    },
    //获取参与top榜数据
    getJoinData() {
      let success = res => {
        if (!is_empty(res.data)) {
          this.joinData = res.data;
        }
      };
      this.$ajax({
        url: "api/bigdata/research_joindata",
        method: "get",
        params: {
          platform_id: this.platformId
        },
        func: { success: success }
      });
    }
  }
};
</script>

